<template>
  <ul :class="classes">
    <slot></slot>
  </ul>
</template>

<script>
  /**
   * timeline时间线组件
   * @module widgets/xdh-timeline
   * @example
   *
   * // 使用说明
   * import XdhTimeline from '@/widgets/xdh-timeline'
   * import XdhTimelineItem from '@/widgets/xdh-timeline-item'
   * <xdh-timeline pending >
   *  <xdh-timeline-item color="green">发布1.0版本</xdh-timeline-item>
   *  <xdh-timeline-item color="gray">发布2.0版本</xdh-timeline-item>
   *  <xdh-timeline-item color="blue">发布3.0版本</xdh-timeline-item>
   * </xdh-timeline>
   */
  const prefixCls = 'xdh-timeline'
  /**
   * xdh-timeline插槽 可放置子组件 xdh-timeline-item 或任意标签
   * @member slot(xdh-timeline)
   */
  /**
   * xdh-timeline-item组件点插槽，可自定义timeline-item前面的点的内容（样式）
   * @member slot=dot(xdh-timeline-item)
   */
  /**
   * xdh-timeline-item内容插槽，可放置任意节点在timeline-item中显示
   * @member slot(xdh-timeline-item)
   */
  export default {
    name: 'XdhTimeline',
    /**
     * 属性参数
     * @property {Boolean} [pending = false] 指定是否最后一个节点为幽灵节点(与前面的节点拉开距离)
     * @property {String} [color = 'colorName'] xdh-timeline-item组件的属性，定义颜色
     */
    props: {
      pending: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      classes () {
        return [
          `${prefixCls}`,
          {
            [`${prefixCls}-pending`]: this.pending
          }
        ]
      }
    }
  }
</script>
